<template>
    <view class="p-4">
        <uv-form labelPosition="left" label-width="80" :model="form" :rules="rules" ref="uFormIns">
            <uv-form-item label="联系人" prop="contactName">
                <uv-input v-model="form.contactName" placeholder="" maxlenght="50" clearable shape="circle">
                </uv-input>
            </uv-form-item>
            <uv-form-item label="联系方式" prop="contactPhone">
                <uv-input v-model="form.contactPhone" placeholder="" maxlenght="50" clearable shape="circle">
                </uv-input>
            </uv-form-item>
            <uv-form-item label="反馈内容" prop="theContent">
                <uv-textarea v-model="form.theContent" placeholder="" count :maxlength="500">
                </uv-textarea>
            </uv-form-item>
            <uv-form-item label=" " prop="images">
                <appFilePicker v-model="form.images" accept="file" text="上传图片" :limit="6" :allows="fileAllows" />
            </uv-form-item>
        </uv-form>
        <view class="my-4">
            <uv-button class="shadow drop-shadow" type="warning" shape="circle" :disabled="loading" :loading="loading" @click="submit">提 交</uv-button>
        </view>
        <!-- <view class="mt-2">
            <uv-text align="center" type="info" text="我的反馈" @click="to('records')"></uv-text>
        </view> -->
    </view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { onReady, onLoad } from '@dcloudio/uni-app'
import { save } from '@/services/feedback'
import appFilePicker from '@/components/app-file-picker.vue'
import { convertToJson, commonFileAllowsExtMap } from '@/utils/index'

const loading = ref(false)

const uFormIns = ref()
const form = ref({
    id: 0,
    contactName: '',
    contactPhone: '',
    images: '',
    theContent: ''
})

const fileAllows = ref(commonFileAllowsExtMap.image)

const rules = ref({
    contactName: {
        required: true,
        trigger: ['blur', 'change'],
        message: '该项必填',
    },
    contactPhone: {
        required: true,
        trigger: ['blur', 'change'],
        message: '该项必填',
    },
    theContent: {
        required: true,
        trigger: ['blur', 'change'],
        message: '该项必填',
    }
})


onReady(() => {
    initForm()
})

const initForm = () => {

}

const to = (url) => {
    uni.navigateTo({
        url
    })
}

const submit = () => {
    uFormIns.value.validate().then(() => {
        loading.value = true
        uni.showLoading({
            title: '正在提交...',
            mask: true
        })
        save({ ...form.value }).then(() => {
            uni.showModal({
                title: '提交成功!',
                content: '感谢您的意见和反馈',
                showCancel: false,
                success: () => {
                    uni.navigateBack()
                }
            })
        }).catch(() => {

        }).finally(() => {
            loading.value = false
            uni.hideLoading()
        })
    }).catch(() => { })
}


</script>